import React, { Component } from 'react'
import Hrader from '../../../../components/head/hrader'
import './mySetson.less'
import Alert from '../../../../components/alert/alert'
import cookies from 'js-cookie'
import axios from 'axios';
import { connect } from 'react-redux'
import fun from '../../../../store/action/index'
class MySetson extends Component {
    constructor() {
        super()
        this.state = {
            headtitle: { title: 'qweqweqw ', path: '/mySet', age: '保存' },
            nowindex: 0,//这是下标   还是控制 渲染 的   及控制 保存
            user_data: [],//用户信息
            yuanpassword: '',//输入的原密码
            xinpassword: '',//输入的新密码
            zaipassword: '',//再次输入
            iconA: false,
            iconB: false,
            alerttitle: '',//弹层提示
            alertFlag: false,//弹层开关
        }
    }
    render() {
        let { nowindex, user_data, yuanpassword, xinpassword, zaipassword } = this.state
        // console.log(user_data.user_account);
        return (
            <div className="mySetson_box">
                <div className="mySetson_header">
                    <Hrader title={this.state.headtitle} subBtn={this.subBtn} />
                </div>
                <div className="mySetson_body">
                    {/* 显示修改密码 */}
                    {/* {nowindex === 0 ? <> */}
                    <div className="mySetson_content">
                        <div><p>账户：</p><b>{user_data.user_account}</b></div>
                        <div>
                            <p><label htmlFor="">原密码</label></p>
                            <div><input type="text" name="" id="" placeholder="填写原密码"
                                value={yuanpassword} onChange={(e) => { this.yuan(e) }} /></div>
                            {/* <span className="iconfont icon-dui1"></span> */}
                        </div>
                        <div>
                            <p><label htmlFor="">新密码</label></p>
                            <div><input type="text" name="" id="" placeholder="填写新密码"
                                value={xinpassword} onChange={(e) => { this.xin(e) }}
                                onFocus={() => { this.xinonFocus() }}
                                onBlur={() => { this.xinonBlur() }} /></div>
                            {this.state.iconA ? <span className="iconfont icon-dui1"></span> : null}
                        </div>
                        <div>
                            <p><label htmlFor="">确认密码</label></p>
                            <div><input type="text" name="" id="" placeholder="再次填写确认"
                                value={zaipassword} onChange={(e) => { this.zai(e) }}
                                onFocus={() => { this.zaionFocus() }}
                                onBlur={() => { this.zaionBlur() }}
                                ref={(zaidom) => { this.zaidom = zaidom }}
                            /> </div>
                            {this.state.iconB ? <span className="iconfont icon-dui1"></span> : null}
                        </div>
                    </div>
                    {this.state.alertFlag ? <div className="my_alert">
                        <Alert title={this.state.alerttitle} alertX={this.alertX} alertSub={this.alertSub}></Alert>
                    </div> : null}
                    {/* </> : null} */}
                </div>

            </div>
        )
    }
    // 原密码
    yuan = (e) => {
        this.setState({ yuanpassword: e.target.value }, () => {
            //返回修改密码时   在次判断
            let { yuanpassword, xinpassword, zaipassword } = this.state
            if (yuanpassword !== '' && yuanpassword !== xinpassword && xinpassword !== '') {
                this.setState({ iconA: true })
            } else {
                this.setState({ iconA: false })
            }
            if (yuanpassword !== xinpassword && xinpassword === zaipassword && zaipassword !== '' && xinpassword !== '') {
                this.setState({ iconB: true, })
            } else {
                this.setState({ iconB: false, })
            }
        })
    }
    //新密码
    xinonFocus = () => {
        let { yuanpassword, xinpassword, } = this.state
        if (yuanpassword === '') {
            this.setState({ alerttitle: '请输入原密码', alertFlag: true })
            // console.log('请输入原密码');
        }

    }
    xin = (e) => {
        this.setState({ xinpassword: e.target.value }, () => {
            let { yuanpassword, xinpassword, } = this.state
            console.log(yuanpassword, xinpassword);
            if (yuanpassword !== '' && yuanpassword !== xinpassword && xinpassword !== '') {
                this.setState({ iconA: true })
            } else {
                this.setState({ iconA: false })
            }
        })
    }
    //失去焦点
    xinonBlur = () => {
        let { yuanpassword, xinpassword, } = this.state
        if (yuanpassword !== '' && yuanpassword === xinpassword) {
            // alert('输入原密码与新密码不能相同')
            // console.log();
            this.setState({ alerttitle: '原密码与新密码不能相同', alertFlag: true })
        }
    }
    // 再次输入密码
    zaionFocus = () => {
        let { yuanpassword, xinpassword, zaipassword } = this.state
        if (yuanpassword === '') {
            // console.log('请输入原密码');
            this.setState({ alerttitle: '请输入原密码', alertFlag: true })
        } else if (xinpassword === '') {
            // alert('请输入新密码')
            // console.log('请输入新密码');
            this.setState({ alerttitle: '请输入新密码', alertFlag: true })
        }
    }
    zai = (e) => {
        this.xinonBlur()
        this.setState({ zaipassword: e.target.value }, () => {
            let { yuanpassword, xinpassword, zaipassword } = this.state
            if (yuanpassword !== xinpassword && xinpassword === zaipassword && zaipassword !== '' && xinpassword !== '') {
                this.setState({ iconB: true, })
            } else {
                this.setState({ iconB: false, })
            }
        })
    }
    //失去焦点
    zaionBlur = () => {
        let { yuanpassword, xinpassword, zaipassword } = this.state
        if (yuanpassword !== xinpassword) {
            if (xinpassword !== zaipassword) {
                // alert('请确认新密码保持一致')
                // console.log('请确认新密码保持一致');
                this.setState({ alerttitle: '请确认新密码保持一致', alertFlag: true })

            }
        }
    }
    // 确认提交
    subBtn = () => {
        let { nowindex, user_data } = this.state
        if (nowindex === 0) {
            let { yuanpassword, xinpassword, zaipassword, user_data } = this.state
            console.log(yuanpassword, xinpassword, zaipassword, user_data);
            if (user_data.user_pass !== yuanpassword) {
                this.setState({ alerttitle: '请输入正确的原密码', alertFlag: true })
            } else if (yuanpassword === xinpassword) {
                this.setState({ alerttitle: '原密码与新密码不能相同', alertFlag: true })
            } else if (xinpassword !== zaipassword) {
                this.setState({ alerttitle: '请确认新密码保持一致', alertFlag: true })
            } else {
                axios({
                    method: 'post',
                    url: '/api/front_end/changePassword',
                    data: {
                        account_number: user_data.user_account,//账号
                        new_password: zaipassword, //新密码
                    }
                }).then(
                    // 成功
                    res => {
                        console.log(res.data);
                        if (res.data.code === '01') {
                            cookies.remove('usertoken')
                            cookies.remove('user_id')
                            this.props.setNav(null)

                            let path = this.props.location.pathname
                            this.props.history.push({
                                pathname: '/login',
                                state: '/home',
                            })
                        }
                    }
                )
            }

        }


    }

    //关闭弹层 
    alertX = () => {
        this.setState({ alertFlag: false })
    }
    //弹层确认
    alertSub = () => {
        this.setState({ alertFlag: false })
    }
    componentDidMount() {
        const _this = this
        let { index } = this.props.location
        this.setState({
            headtitle: { title: this.props.location.state.title, path: '/mySet', age: '保存' },
            nowindex: index,
            // acquiescentvalue: title,
            // value: title,
            // sex: user_data.user_sex,
            // user_birthday: user_data.user_birthday
        })
        // 请求用户信息
        if (cookies.get('usertoken')) {
            axios({
                method: 'post',
                url: '/api/front_end/userMess',
                data: {
                    user_account: cookies.get('usertoken'),
                }
            }).then((res) => {
                let datas = res.data
                if (datas.code === '01') {
                    cookies.set('user_id', datas.data.user_id)
                    _this.setState({
                        user_data: datas.data,//数据
                    })
                }
            })
        }
    }
}
export default connect(state => state.Login, fun.loginAction)(MySetson)